<template>
  <div class="user-info">
    <el-dropdown>
      <div class="info">
        <el-avatar
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        ></el-avatar>
        {{username}}
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <el-button type="primary" @click="logout">退出登录</el-button>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import {  useRouter } from 'vue-router'
import { useLoginStore, useRegisterStore } from '@/store';
import localCache from '@/utils/cache'
const loginStore = useLoginStore()
const registerStore = useRegisterStore()
const router = useRouter()

const username = loginStore.username
const logout = () => {
  localCache.removeCache('token')
  localCache.removeCache('userId')
  localCache.removeCache('userInfo')
  localCache.removeCache('roleId')
  localCache.removeCache('athleteInfo')
  localCache.removeCache('rights')
  loginStore.athleteInfo = {}
  registerStore.registeredItems = []
  router.push('/login')
}
</script>

<style scoped lang="less">
.user-info{
  display: flex;
  justify-content: flex-end;
}

</style>